.scan-container {
  position: relative;
  // position: static;
  // display: inline-block;
}

.scan-body {
  position: relative;

  .scan-line {
    border-radius: 10px;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .scan-line-block {
    position: absolute;
    background: white;
    box-shadow: 0 0 70px 20px white;
    clip-path: inset(0);
  }

  &.scan-horizontal {
    .scan-line-block {
      bottom: 0;
      width: 5px;
      height: 100%;
      left: 0;
      top: 0;
      animation: x 0.75s ease-in-out infinite alternate, y 1.5s ease-in-out infinite;

    }

  }

  &.scan-vertical {

    .scan-line-block {
      top:0;
      width: 100%;
      height: 5px;
      box-shadow: 0 0 70px 20px white;
      // transform:rotate(90deg);
      // width: 100%;
      // height: 5px;
      animation: xx 0.75s ease-in-out infinite alternate , yy 1.5s ease-in-out infinite;


    }

  }
}

@keyframes x {
  to {
    transform: translateX(100%);
    left: calc(100% - 5px);

  }
}

@keyframes xx {


  to {
    transform: translateY(-100%);
    top: 100%;
  }
}



// 上、右、下、左
@keyframes y {

  33% {
    clip-path: inset(0 0 0 -100px);
  }

  50% {
    clip-path: inset(0 0 0 0);
  }

  83% {
    clip-path: inset(0 -100px 0 0);
  }
}

@keyframes yy {

  33% {
   
    clip-path: inset(-100px 0 0 0);
  }

  50% {
    clip-path: inset(0 0 0 -100px);
  }

  83% {
    clip-path: inset(0 0 -100px 0);
  
  }
}

// .scan-line::before {
//     content: '';
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     width: 5px;
//     background: red;
//     box-shadow: 0 0 70px 20px red;
//     clip-path: inset(0);
//     animation: scanX 0.75s ease-in-out infinite alternate, y 1.5s ease-in-out infinite;
// }